<template>
	<div class="box">
		<button @click="isSho">点击显示和隐藏</button>
		<transition>
			<h2 v-show="isShow" >{{ msg }}</h2>
		</transition>
	</div>
</template>

<script>
export default {
	name: 'TextA',
	data() {
		return {
			msg: 'text',
			isShow: true
		}
	},
	methods: {
		isSho() {
			this.isShow = !this.isShow
		}
	}
}
</script>


<style scoped>
.box {
	width: 300px;
	margin: 0 auto;
}

h2 {
	width: 200px;
	height: 50px;
	background-color: tomato;
}

.v-enter-active {
	animation: identifier 1s;
}

.v-leave-active {
	animation: identifier 1s reverse;
}

@keyframes identifier {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(0);
	}
}</style>